// src/pages/Settings/index.tsx

import React from "react";
import { Card, Form, Input, Button, Switch } from "antd";
import { useAppDispatch, useAppSelector } from "@store/hooks";
import { selectUserName, selectUserAvatar } from "@store/modules/userSlice";
import { toggleDarkMode } from "@store/modules/settingsSlice";
import "./settings.less";

const Settings: React.FC = () => {
  const dispatch = useAppDispatch();
  const username = useAppSelector(selectUserName);
  const avatar = useAppSelector(selectUserAvatar);
  const darkMode = useAppSelector((state) => state.settings.darkMode);

  const onFinishProfile = (values: any) => {
    // 调用后端更新个人资料接口
    console.log("更新个人资料：", values);
  };

  const onToggleDarkMode = () => {
    dispatch(toggleDarkMode());
  };

  return (
    <div>
      <Card title="个人资料" style={{ marginBottom: 24 }}>
        <Form layout="vertical" initialValues={{ username }}>
          <Form.Item label="用户名" name="username">
            <Input disabled />
          </Form.Item>
          <Form.Item label="头像 URL" name="avatar">
            <Input defaultValue={avatar} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={onFinishProfile}>
              更新资料
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <Card title="界面设置">
        <Form layout="horizontal">
          <Form.Item label="夜间模式" valuePropName="checked">
            <Switch checked={darkMode} onChange={onToggleDarkMode} />
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Settings;
